<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px">
    <div class="mui-scroll">
      <crossLine></crossLine>
      <div class="lst">
        <div class="lstImg" v-if="currentCar.pic==null || currentCar.pic==''">
            <img src="static/img/noCarPic.png">
        </div>
        <div class="lstImg" v-else>
            <img :src="$store.state.appData.imgUrl+currentCar.pic">
        </div>
        <div class="lstMsg">
            <p class="carName">{{currentCar.carName}}</p>
            <p class="carColor">颜色:<span>{{currentCar.color}}</span></p>
            <p class="carPrice">询价保证金:<span class="money-color">￥{{currentCar.orderPrice / 100}}</span></p>
        </div>
      </div>
      <crossLine></crossLine>
      <!-- 退款原因 -->
      <div class="title">
        <span class="text">退款原因</span>
      </div>
      <mt-checklist :class="status.value? 'mint-radiolist-error':''"
        title=""
        v-model="value"
        :options="housingOptions">
      </mt-checklist>
      <crossLine></crossLine>
      <!-- <a class="mint-cell">
        <div class="mint-cell-left"></div> 
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <label class="mint-checklist-label">
              <span class="mint-checkbox">
              <input type="checkbox" class="mint-checkbox-input" v-on:click="CheckItem($event.target)"  value="4">
              <span class="mint-checkbox-core"></span></span> 
              <span class="mint-checkbox-label">其他</span>
            </label>
          </div> 
          <div class="mint-cell-value">
            <span></span>
          </div>
        </div> 
        <div class="mint-cell-right"></div>
      </a> -->
      <div class="title">
        <span class="text">其他原因</span>
      </div>
      <!-- 输入框 -->
      <v-edit-div  class="adaptive_box"  placeholder="限制100个字" v-model="otherReason"></v-edit-div>
      <!-- 确认按钮 -->
      <mt-button type="primary" size="large" class="tijiao" @click="handleDrawBack">提交</mt-button>
    </div>
  </div>
</template>
<script>
import crossLine from '@/components/base/cross-line/cross-line'
import vEditDiv from '@/components/base/v-edit-div/v-edit-div'
import mui from 'static/js/mui'
import { Radio } from 'mint-ui'
import { Checklist } from 'mint-ui'
import { Toast } from 'mint-ui'
import { saveRefundReason, refund } from '@/api/order'
export default {
   data() {
    return {
      currentCar: {},
      otherReason:'',
      status:{
        value:false
      },
      value: [
        {remark: ''}
      ],
      housingOptions: [
        {
          label: '我已经通过其他方式购买汽车',
          value: {0:'我已经通过其他方式购买汽车'}
        },
        {
          label: '我只是来看看价格的，反正可以退款',
          value: {1:'我只是来看看价格的，反正可以退款'}
        },
        {
          label: '没有匹配到我要的价格',
          value: {2:'没有匹配到我要的价格'}
        },
        {
          label: '购车不方便',
          value: {3:'购车不方便'}
        }
      ],
      reqData:{
        paymentNumber: '',
        type: '',
        content: ''
      }
    }
  },
  created() {
    this.getParams()
  },
  mounted() {
    //初始化mui
    mui.init({
        keyEventBind: {
        backbutton: true  //关闭back按键监听
        }
    })
    mui.back = function () {
        history.go(-1)
    }
    mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
    });
  },
  components: {
    crossLine, vEditDiv
  },
  props: {},
  watch: {
  },
  methods: {
    getParams() {
      //获取路由参数'
      let routeVal = this.$route.params
      if(JSON.stringify(routeVal)!=="{}"){
          if(typeof(routeVal.currentCar) !== 'undefined'){
              this.currentCar = routeVal.currentCar
          }
      }
    },
    handleDrawBack() {
      let that = this
      if(this.otherReason == '' && this.value.length == 1 ){
        mui.alert('请填写退款原因或其他原因', '', ['确定'],function() {},'div');
        return
      }
      if(this.otherReason.length > 100){
        Toast('其他原因不能大于100字符')
        return 
      }
      if(this.otherReason !== ''){
        this.value[0].remark = this.otherReason
      }
      this.reqData.paymentNumber = this.currentCar.paymentNumber
      this.reqData.type = 1
      this.reqData.content = JSON.stringify(this.value)
      saveRefundReason(this.reqData).then(res=>{
        refund({'paymentNumber': this.currentCar.paymentNumber}).then(res=>{
            if(res.msg == 'success'){
              mui.alert('退款申请成功！', '提示', ['确定'], function() {
                that.$router.push('/orderNavigate/crowdOrder')
              },'div')
            }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.lst {
  width: 100%;
  background: #fff;
  overflow: hidden;
  padding: 10px 12px 0px 12px;
  .lstImg {
    width: 38%;
    float: left;
    text-align: center;
    img {
        width:120px;
        vertical-align: middle;
    }
  }
  .lstMsg {
    width:62%;
    float: left;
    height: 100%;
    padding: 6px 0px 5px 15px;
    p {
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap: break-word;
        word-break: normal;
        margin-bottom: 10px;
    }
  }
}
.carName {
  font-size: 0.7rem;
  color: #333;
  line-height: 15px;
  height: 28px;
}
.carColor {
  font-size: 0.6rem;
  line-height: 15px;
}
.money-color{
  color: rgb(255, 106, 39);
  line-height:21px;
  display:inline-block;
}
.title{
  background: #fff;
  font-size:16px;
  padding-left:20px;
  padding-top:10px;
  padding-bottom:5px;
}
//提交
.tijiao{
  margin-top:50px;
  margin-bottom:30px;
  height:40px;
  width:94%;
  left:3%;
  position: relative;
}
.adaptive_box { 
  text-align:left; 
  padding-left: 20px;
  padding-top: 18px;
  line-height:16px; 
  font-size: 12px; 
  border: none; 
  background:#fff;
  min-height: 50px; 
  max-height: 300px; 
  margin-right: 0; 
  outline: 0; 
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  display: block;
  position: relative;

}
.adaptive_box:empty:before{
  content: attr(placeholder);
  color:#999;
}
.adaptive_box:focus:before{
  content:none;
}
</style>
